// 类组件
// import React, {Component} from 'react';
// 函数组件
import React from 'react';

import styles from './nav-bar.module.css';
import propTypes from 'prop-types';

/*
* props:
* */
// 类组件
// export default class NavBar extends Component {

//   state = {
//   };

//   static defaultProps = {
//     mode: 'dark',
//     onLeftClick: () => null,
//   };

//   static propTypes = {
//     mode: propTypes.string,
//     icon: propTypes.element,//要求icon是一个组件，被传入
//     // icon: propTypes.any,
//     onLeftClick: propTypes.func
//   };


//   render() {
//     let {icon,onLeftClick,mode,children} = this.props;
//     return (
//       <div
//         className={`${styles.nav} ${styles[`nav--${mode}`]}`}
//       >
//         <div className={styles.arrow}>
//           <div
//             className={styles.arrow}
//             onClick={onLeftClick}
//           >{icon}</div>
//           {children}
//         </div>
//       </div>
//     )
//   }
// }

// 函数组件
const NavBar = props => {
  let {icon,onLeftClick,mode,children} = props;
  return (
    <div
      className={`${styles.nav} ${styles[`nav--${mode}`]}`}
    >
      <div className={styles.arrow}>
        <div
          className={styles.arrow}
          onClick={onLeftClick}
        >{icon}</div>
        {children}
      </div>
    </div>
  )
}

NavBar.defaultProps = {
  mode: 'dark',
  onLeftClick: () => null,
};

NavBar.propTypes = {
  mode: propTypes.string,
  icon: propTypes.element,//要求icon是一个组件，被传入
  // icon: propTypes.any,
  onLeftClick: propTypes.func
};

export default NavBar;
